pwa 入门实践-manifest清单文件

发表于

manifest（清单文件）

定义：

manifest（清单文件）其实就是一个JSON文件，提供应用相关的信息
eg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "Progressive Times web app",
  "short_name": "Progressive Times",
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#FFDF00",
  "background_color": "#FFDF00",
  "icons": [{
      "src": "homescreen.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "homescreen-144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

  • name 用作当用户被提示安装应用时出现的文本。同时也是启动页面显示名字
  • short_name 用作当应用安装后出现在用户主屏幕上的文本
  • start_url 决定了当用户从设备的主屏幕开启 Web 应用时所出现的第一个页面。根据构建的 Web 应用类型，你可能需要预设如何首次加载。display 字段表示开发者希望他们的 Web 应用如何向用户展示。
  • theme_color 字段，可以对浏览器的地址栏进行着色，以符合网站的主色调。
  • icons 字段决定了当 Web 应用被添加到设备主屏幕时所显示的图标。
  • background_color 启动页面的颜色
  • display 设置启动页面的显示模式
    • Fullscreen - 打开 Web 应用并占用整个可用的显示区域。
    • Standalone - 打开 Web 应用以看起来像一个独立的原生应用。此模式下，用户代理将排除诸如 URL 栏等标准浏览器 UI 元素，但可以包括诸如状态栏和系统返回按钮的其他系统 UI 元素。
    • Minimal-ui - 此模式类似于 fullscreen，但为终端用户提供了可访问的最小 UI 元素集合，例如，后退按钮、前进按钮、重载按钮以及查看网页地址的一些方式。
    • Browser - 使用操作系统内置的标准浏览器来打开 Web 应用。 （默认参数）

      引入

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
    <link rel="manifest" href="/manifest.json"> 
  </head>
  <body>
    ..content goes here..
  </body>
</html>

添加到主屏幕条件

显示“添加到主屏幕”提示，需要满足以下几个条件：

  • 需要 manifest.json 文件
  • 清单文件需要启动 URL
  • 需要 144x144 的 PNG 图标
  • 网站正在使用通过 HTTPS 运行的 Service Worker
  • 用户需要至少浏览网站两次，并且两次访问间隔在五分钟之上

控制浏览器的添加到主屏幕事件

当你不希望浏览器的添加到主屏幕提示时

1
2
3
4
window.addEventListener('beforeinstallprompt', function(e) {
  e.preventDefault();
  return false;
});

判断用户对该功能的选择情况

1
2
3
4
5
6
7
8
9
10
window.addEventListener('beforeinstallprompt', function (event) {
  event.userChoice.then(function (result) {          
    console.log(result.outcome);
    if (result.outcome == 'dismissed') {             
      // 发送数据以进行分析
    } else {
      // 发送数据以进行分析
    }
  });
});

为 beforeinstallprompt 事件添加了监听器。这个事件有个叫做 userChoice 的对象，它返回用户决定的 Promise 。我们可以使用这个 Promise 的结果来判断用户是关掉提示还是确认提示。

此时，你可以决定将此信息发送到 Web 分析工具，以便随着时间的推移跟踪此功能的使用情况。这项技术可以用于了解用户如何与“添加到主屏幕”提示进行交互。

控制提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
  </head>
  <body>
    <button id="btnSave" disabled>Click this to show the prompt</button>                       
  </body>
  <script>
    window.addEventListener('load', function () {
      var btnSave = document.getElementById('btnSave');
      var savedPrompt;
      if ('serviceWorker' in navigator) {                                                      
        navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
          // 注册成功
          console.log('ServiceWorker registration successful with scope: ',
            registration.scope);
        }).catch(function (err) {
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
      window.addEventListener('beforeinstallprompt', function (e) {
        e.preventDefault();                                                                    
        btnSave.removeAttribute('disabled');                                                   
        savedPrompt = e;                                                                       
        return false;
      });
      btnSave.addEventListener('click', function () {                                          
        if (savedPrompt !== undefined) {                                                       
          savedPrompt.prompt();                                                                
          savedPrompt.userChoice.then(function (result) {                                      
            if (result.outcome == 'dismissed') {
              console.log('User dismissed homescreen install');
            } else {
              console.log('User added to homescreen');
            }
            savedPrompt = null;                                                                
          });
        }
      });
    });
  </script>
</html>
  • 点击此按钮会显示提示
  • 检查是否支持 Service Workers，如果支持则注册
  • 为 ‘beforeinstallprompt’ 事件添加事件监听器
  • 此时，我们可以启用按钮
  • 我们将事件保存在变量中，这样它可以稍后触发
  • 为按钮的点击事件添加事件监听器
  • 用户与我们的应用进行了积极的互动，Chrome 已经尝试提前提醒，所以让我们来看看提示
  • 遵循用户的选择
  • 我们不再需要提示，清理掉它

调试清单文件

支持pwa技术网站：https://www.flipkart.com/